<script setup>
import { getStudentInfo, deleteStudentInfo, getAcademyInfo, getStudentInfoById, updateStudentInfo } from '@/api/student.js';
import { ref } from "vue";
import { ElAvatar, ElMessage, ElMessageBox } from "element-plus";
import { Delete, Edit, Share } from "@element-plus/icons-vue";

const student_data = ref([]);
const student_total = ref(0);
const student_data_by_id = ref(null);
const academy_data = ref([]);

const editDialogVisible = ref(false); // 控制弹窗显示
const isEditMode = ref(false); // 是否处于编辑模式
const currentStudent = ref({
  userId: null,
  userName: "",
  email: "",
  phone: "",
  account: "",
  className: "",
  gender: "",
  academy: "",
  description: "",
  avatar: "",
});

// 查询学院信息
const fetchAcademy = async () => {
  const response = await getAcademyInfo();
  if (response.data.code === 200) {
    academy_data.value = response.data.data;
  } else {
    ElMessage.error(response.data.msg);
  }
};

// 获取学生信息
const filters_student = ref({
  userName: null,
  className: null,
  academy: null,
  pageNum: 1,
  pageSize: 8,
});
const fetchStudents = async () => {
  const response = await getStudentInfo(filters_student.value);
  if (response.data.code === 200) {
    student_data.value = response.data.data.rows;
    student_total.value = response.data.data.total;
  } else {
    ElMessage.error(response.data.msg);
  }
};

// 重置筛选条件
const resetFilters_student = () => {
  filters_student.value = {
    userName: null,
    className: null,
    academy: null,
    pageNum: 1,
    pageSize: 8,
  };
  fetchStudents();
};

// 查询单个学生信息
const fetchStudentById = async (id) => {
  const response = await getStudentInfoById(id);
  if (response.data.code === 200) {
    currentStudent.value = response.data.data;
  } else {
    ElMessage.error(response.data.msg);
  }
};

// 修改学生信息
const handleEditStudent = async (row) => {
  editDialogVisible.value = true;

  await fetchStudentById(row.userId);
  isEditMode.value = false; // 默认不允许编辑
};

const enableEditMode = () => {
  isEditMode.value = true; // 启用编辑模式
};

// 保存学生信息
const handleSaveStudent = async () => {
  const response = await updateStudentInfo(currentStudent.value);
  if (response.data.code === 200) {
    ElMessage.success("修改成功");
    fetchStudents();
    editDialogVisible.value = false; // 关闭弹窗
  } else {
    ElMessage.error(response.data.msg);
  }
};

// 删除学生
const handleDeleteStudent = async (row) => {
  ElMessageBox.confirm('您确定要删除此学生吗?', '确认删除', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(async () => {
    const response = await deleteStudentInfo(row.userId);
    if (response.data.code === 200) {
      ElMessage.success("删除成功");
      fetchStudents();
    } else {
      ElMessage.error(response.data.msg);
    }
  });
};
const handleStudentPageChange = (page) => {
  filters_student.value.pageNum = page;
  fetchStudents();
};

// 初始化
fetchAcademy();
fetchStudents();
</script>

<template>
  <el-form :inline="true" :model="filters_student" style="margin-left: -10px;width:100%">
    <el-form-item label="姓名">
      <el-input v-model="filters_student.userName" style="width: 140px;"></el-input>
    </el-form-item>
    <el-form-item label="学院">
      <el-input v-model="filters_student.academy" style="width: 150px;"></el-input>
    </el-form-item>
    <el-form-item label="班级">
      <el-input v-model="filters_student.className" style="width: 140px;"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="fetchStudents">查询</el-button>
      <el-button type="success" @click="resetFilters_student">重置</el-button>
    </el-form-item>


    <el-form-item>
      <el-button type="success" @click="handleAddStudent">新增</el-button>

      <el-tooltip class="item" effect="dark" content="导出学生信息" placement="top">
        <el-button type="info" @click="handleExportStudent" :icon="Share" />
      </el-tooltip>
    </el-form-item>



  </el-form>

  <el-table border :data="student_data" style="margin-top: 20px;">
    <el-table-column label="头像" width="80">
      <template #default="{ row }">
        <el-avatar :size="40" :src="row.avatar || 'https://via.placeholder.com/80'"></el-avatar>
      </template>
    </el-table-column>
    <el-table-column prop="userName" label="姓名" width="100"></el-table-column>
    <el-table-column prop="gender" label="性别" width="70"></el-table-column>
    <el-table-column prop="email" label="邮箱" width="150"></el-table-column>
    <el-table-column prop="phone" label="电话" width="120"></el-table-column>
    <el-table-column prop="academy" label="学院" width="150"></el-table-column>
    <el-table-column prop="className" label="班级" width="150"></el-table-column>
    <el-table-column label="操作" width="180">
      <template #default="{ row }">
        <el-button type="info" @click="handleEditStudent(row)" :icon="Edit" plain />
        <el-button type="danger" @click="handleDeleteStudent(row)" :icon="Delete" plain />
      </template>
    </el-table-column>
  </el-table>

  <el-pagination
      background
      layout="total, prev, pager, next"
      :current-page="filters_student.pageNum"
      :page-size="filters_student.pageSize"
      :total="student_total"
      @current-change="handleStudentPageChange"
      style="margin-top: 20px;margin-left:300px;"
  />

  <!-- 编辑弹窗 -->
  <el-dialog v-model="editDialogVisible" title="修改学生信息" width="600px">
    <el-form :model="currentStudent" label-width="80px">
      <el-form-item label="姓名">
        <el-input v-model="currentStudent.userName" :disabled="!isEditMode" />
      </el-form-item>
      <el-form-item label="邮箱">
        <el-input v-model="currentStudent.email" :disabled="!isEditMode" />
      </el-form-item>
      <el-form-item label="电话">
        <el-input v-model="currentStudent.phone" :disabled="!isEditMode" />
      </el-form-item>
      <el-form-item label="班级">
        <el-input v-model="currentStudent.className" :disabled="!isEditMode" />
      </el-form-item>
      <el-form-item label="性别">
        <el-select v-model="currentStudent.gender" :disabled="!isEditMode" placeholder="请选择性别">
          <el-option label="男" value="男"></el-option>
          <el-option label="女" value="女"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="学院">
        <el-select v-model="currentStudent.academy" :disabled="!isEditMode" placeholder="请选择学院">
          <el-option
              v-for="academy in academy_data"
              :key="academy.id"
              :label="academy.academyName"
              :value="academy.academyName"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="描述">
        <el-input v-model="currentStudent.description" :disabled="!isEditMode" type="textarea" />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="editDialogVisible = false">取消</el-button>
      <el-button v-if="!isEditMode" type="primary" @click="enableEditMode">修改</el-button>
      <el-button v-else type="success" @click="handleSaveStudent">保存</el-button>
    </template>
  </el-dialog>
</template>

<style scoped>
</style>
